<template>
  <div>
    <div class="top-header">
      <vxe-button status="primary" size="small" @click="addBtn"
        >添加</vxe-button
      >
      <!-- 输入框 -->
      <div class="box">
        <span>筛选条件一：</span>
        <vxe-input
          v-model="form.one"
          placeholder="小型尺寸"
          size="small"
        ></vxe-input>
      </div>
      <!-- 下拉选择框 -->
      <div class="box">
        <span>筛选条件二：</span>
        <vxe-select v-model="form.two" placeholder="筛选条件二" size="small">
          <vxe-option
            v-for="num in 10"
            :key="num"
            :value="num"
            :label="`选项${num}`"
          ></vxe-option>
        </vxe-select>
      </div>
      <div class="box">
        <!-- 远程搜索框 -->
        <!-- multiple是否多选，filterable是否可以筛选remote可以远程搜索 -->
        <!-- reserve-keyword 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词-->
        <!-- remote-method远程搜索对应的函数 -->
        <!--loading是否正在从远程获取数据  -->
        <span>筛选条件三：</span>
        <el-select
          v-model="form.three"
          multiple
          size="small"
          filterable
          remote
          reserve-keyword
          placeholder="请输入筛选条件"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- checkbox-config是否在第一列显示id -->
    <vxe-grid
      height="500"
      :data="tableData"
      ref="xTable"
      :columns="columns"
      keep-source
      rowId="id"
      align="center"
      @edit-closed="editClosedEvent"
      :edit-config="{
        trigger: 'dblclick',
        mode: 'row',
        showUpdateStatus: true,
        showInsertStatus: true,
      }"
      :checkbox-config="{ labelField: 'id' }"
    >
      <template #contyent="{ row }">
        <span v-html="row.meun"></span>
      </template>

      <template #operation="{ row }">
        <vxe-button @click="contentBtn(row)" status="success">详情</vxe-button>
        <vxe-button status="danger" @click="deleteBtn(row)">删除</vxe-button>
      </template>
    </vxe-grid>

    <vxe-pager
      background
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      :total="page.totalResult"
      @page-change="pageChange"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
    >
    </vxe-pager>
  </div>
</template>

<script>
export default {
  name: "ConsunmptionList",
  data() {
    return {
      form: {
        one: "",
        two: "",
        three: "",
      },
      options: [
        { label: "11", value: "1" },
        { label: "22", value: "2" },
      ],
      tableData: [
        {
          id: 1,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>nhewufbcusabcunuijnaujixnsa</p>",
        },
        {
          id: 1,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>nhewufbcusabcunuijnaujixnsa</p>",
        },
        {
          id: 1,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>nhewufbcusabcunuijnaujixnsa</p>",
        },
        {
          id: 2,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>qoiwhduoiansudhsaudhiqAJSOISA</p>",
        },
        {
          id: 3,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>jweiufhndsabfgwqiajdnoin</p>",
        },
        {
          id: 3,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>jweiufhndsabfgwqiajdnoin</p>",
        },
        {
          id: 3,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>jweiufhndsabfgwqiajdnoin</p>",
        },
        {
          id: 3,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>jweiufhndsabfgwqiajdnoin</p>",
        },
        {
          id: 3,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>jweiufhndsabfgwqiajdnoin</p>",
        },
        {
          id: 3,
          name: "wd",
          sex: "2",
          amount: "1",
          age: "1",
          email: "21",
          nickname: "21",
          meun: "<p>jweiufhndsabfgwqiajdnoin</p>",
        },
      ],
      //表格标题
      columns: [
        { type: "seq", width: 60, fixed: "left" },
        {
          type: "checkbox",
          title: "ID",
          width: 100,
        },
        {
          field: "name",
          title: "名字",
          sortable: true,
          editRender: { name: "input", attrs: { placeholder: "请输入名称" } }, //attrs渲染属性
        },
        {
          field: "sex",
          title: "性别",
          editRender: {
            name: "$select",
            options: [
              { label: "男", value: "1" },
              { label: "女", value: "2" },
            ],
            props: { placeholder: "请选择性别" },
          },
        },
        {
          field: "amount",
          title: "账号",
          formatter: this.formatAmount, //格式化显示的内容；渲染前做一些处理
          editRender: {
            name: "$input", //渲染器名称
            props: { type: "float", digits: 2, placeholder: "请输入数值" }, //渲染数据和属性
          },
        },
        {
          field: "age",
          title: "年龄",
          visible: false,
          sortable: true,
          editRender: {
            name: "$input",
            props: { type: "number", min: 1, max: 120 },
          },
        },
        {
          field: "email",
          title: "邮箱",
          width: 160,
          editRender: { name: "$input", props: { placeholder: "请输入邮件" } },
        },
        {
          field: "nickname",
          title: "昵称",
          editRender: { name: "input", attrs: { placeholder: "请输入昵称" } },
        },
        {
          field: "meun",
          title: "描述",
          sortable: true,
          slots: { default: "contyent" },
          editRender: { name: "input", attrs: { placeholder: "请输入名称" } }, //attrs渲染属性
        },
        {
          title: "操作",
          width: 160,
          showOverflow: true,
          slots: { default: "operation" },
        },
      ],
      sexList: [
        { label: "男", value: "1" },
        { label: "女", value: "2" },
      ],
      page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
    };
  },
  created() {
    this.page.totalResult = this.tableData.length;
  },
  mounted() {},
  methods: {
    async addBtn() {
      const $table = this.$refs.xTable;
      const newRow = {
        id: 4,
        name: "wd",
        sex: "2151",
        amount: "1",
        age: "1",
        email: "21",
        nickname: "21",
      };

      this.tableData.unshift(newRow); //第一位添加
      await $table.reloadData(this.tableData); //重新加载数据
      await $table.setActiveRow(newRow); //激活输入框
    },
    //分页触发事件
    pageChange({ currentPage, pageSize }) {
      this.page.pageSize = pageSize;
      this.page.currentPage = currentPage;
      // 请求列表数据刷新列表
    },
    // 编辑关闭触发事件
    editClosedEvent({ row }) {
      console.log(row);
    },
    //去详情页
    contentBtn(row) {
      console.log(row);
      this.$router.push({
        name: "ConsunmptionDetails",
        params: { item: JSON.stringify(row) },
      });
    },
    //删除
    deleteBtn(row) {
      console.log(row);
      this.$msgbox({
        message: "您确定要删除吗",
        title: "确认删除",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
        type: "error",
      })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            message: "取消删除",
            type: "info",
          });
        });
    },
    //远程搜索
    remoteMethod() {},
  },
};
</script>

<style lang="less" scoped>
.top-header {
  display: flex;
  background-color: #fff;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 20px;
  .box {
    display: flex;
    align-items: center;
    margin: 6px 0;
    span {
      color: #aaa;
      margin: 0 6px;
    }
  }
}
</style>